<!-- 选择费用类型 -->
<template>
	<a-modal v-bind="options" class="rate-tax-configuration">
		<div class="dictionary-container">
			<div class="right">
				<div class="r-cont-box">
					<div v-for="(e, i) in state.dicDetailList" :key="e.name" class="r-cont-block">
						<div class="r-cont-top">
							<a-checkbox class="r-cont-top-checkbox" v-model:checked="e.isUse" :id="e.id" @change="change(e)"></a-checkbox>
							<div class="r-cont-top-name">{{ e.name }}</div>
						</div>

						<div class="r-content">
							<div class="checkbox" v-for="(m, j) in e.metaList" :key="m.name">
								<a-checkbox v-model:checked="m.isUse" :id="m.id" @change="change(e, m)">
									{{ m.name }}
								</a-checkbox>
								<!-- <template v-if="!m.isSystemDefault">
									<edit-two-tone v-action="['mk_set_dictionary_bj']" @click="action('edit', m, e.name)" />
									<delete-two-tone v-action="['mk_set_dictionary_sc']" two-tone-color="red" @click="action('delete', m)" />
								</template> -->
							</div>
						</div>
					</div>
					<a-checkbox v-model:checked="state.isSelectAll" @change="isSelectAllFun">全选</a-checkbox>
				</div>
			</div>
		</div>

		<template v-slot:footer>
			<a-button type="primary" html-type="submit" @click="submit">保存</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, defineEmits, watch, onMounted} from 'vue'
	import {message, Modal} from 'ant-design-vue'
	import {PlusOutlined} from '@ant-design/icons-vue'
	import {listDict} from '@/api/tax-rate-list'
	import XEUtils from 'xe-utils'

	const emits = defineEmits(['update:visible', 'close', 'checkData'])

	const props = defineProps<{
		visible: boolean
		data: any
		taxId: string
		checkList: any
	}>()

	interface State {
		dicList: {
			id: string
			label: string
			name: string
			icon: string
		}[]
		dicDetailList: any[]
		checkedList: any[]
		popupVis: boolean
		operationType: string
		dicForm: {
			name: string
			iconUrl: string
			label: string
			pid: string
			isUse: number
			orderIndex: number
		}
		isNeedIcon: boolean
		editId: string
		isSelectAll: boolean
		updateList: any[]
	}
	const list = reactive({
		checked: [],
		dicDetail: [],
		lastChecked: []
	})

	const state = reactive<State>({
		dicList: [],
		dicDetailList: [],
		checkedList: [],
		popupVis: false,
		operationType: 'add',
		dicForm: {
			name: '',
			iconUrl: '',
			label: '',
			pid: '',
			isUse: 0,
			orderIndex: 0,
			id: ''
		},
		isNeedIcon: false,
		editId: '',
		isSelectAll: false,
		updateList: []
	})

	onMounted(() => {
		getExpenseType()
	})

	watch(
		() => state.popupVis,
		(newVal: boolean) => {
			if (!newVal) {
				// 初始化表单
				state.dicForm = {
					name: '',
					iconUrl: '',
					label: '',
					pid: '',
					isUse: 0,
					orderIndex: 0
				}
			}
		}
	)

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				if (!props.taxId) {
					// 新增
					if (props.data.length > 0) {
						state.dicDetailList = XEUtils.clone(props.data, true)
						state.isSelectAll = state.dicDetailList.every(e => e.isUse)
						state.checkedList = state.dicDetailList
						state.dicDetailList.map(e => {
							e.metaList.forEach(meta => {
								if (meta.isUse) {
									list.lastChecked.push(meta)
								}
							})
						})
					} else {
						getExpenseType()
					}
				} else {
					state.dicDetailList = state.dicDetailList.map(e => {
						e.metaList.map(meta => {
							for (let check = 0; check < props.checkList.length; check++) {
								if (props.checkList[check].id === meta.id) {
									meta.isUse = true
									return meta
								} else {
									meta.isUse = false
								}
							}
							return XEUtils.clone(meta, true)
						})
						return XEUtils.clone(e, true)
					})

					state.dicDetailList.map(e => {
						e.isUse = e.metaList.every(meta => meta.isUse)
						return e
					})
					state.isSelectAll = state.dicDetailList.every(e => e.isUse)
					state.checkedList = [...state.dicDetailList]
				}
			}
		}
	)

	const options = reactive({
		title: '选择费用类型',
		width: 1300,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		visible: toRef(props, 'visible'),
		onCancel() {
			console.log(state.dicDetailList, props.data, '0099')
			setTimeout(() => emits('close'), 100)
		}
	})

	const submit = async () => {
		list.checked = []
		list.dicDetail = []
		state.checkedList.forEach(e => {
			e.metaList.forEach(meta => list.checked.push(meta))
		})
		state.dicDetailList.map(e => {
			e.metaList.forEach(meta => {
				if (meta.isUse) {
					list.dicDetail.push(meta)
				}
			})
		})
		if (list.lastChecked.length !== list.dicDetail.length) {
			message.success('保存成功')
		} else {
			const isEqual = ref(false)
			isEqual.value = list.lastChecked.some(e => list.dicDetail.some(meta => meta.id !== e.id))
			if (isEqual.value) {
				emits('close')
			} else {
				message.success('保存成功')
			}
		}

		emits('checkData', XEUtils.clone(list.dicDetail, true), XEUtils.clone(state.checkedList, true))
		emits('close')
	}

	const change = (data: any, faData: any) => {
		if (!faData) {
			data.metaList = data.metaList.map(e => {
				return {
					...e,
					isUse: data.isUse
				}
			})
		} else {
			data.isUse = data.metaList.every(e => e.isUse)
			// console.log(data, faData)
		}
		state.isSelectAll = state.dicDetailList.every(e => e.isUse)
	}

	/**
	 * 点击全选按钮
	 */
	const isSelectAllFun = () => {
		state.dicDetailList = state.dicDetailList.map(e => {
			e.isUse = state.isSelectAll
			e.metaList.every(meta => {
				meta.isUse = state.isSelectAll
				return meta
			})
			return e
		})
	}

	/**
	 *获取费用类型
	 */
	const getExpenseType = () => {
		listDict().then(res => {
			state.dicDetailList = res.data.map(e => {
				e.isUse = e.metaList.every(meta => {
					meta.isUse = meta.isUse === 1 ? 1 : 1
					return Boolean(meta.isUse)
				})
				return e
			})

			state.isSelectAll = state.dicDetailList.every(e => e.isUse)
			state.checkedList = [...state.dicDetailList]
		})
	}
</script>

<style lang="less">
	.rate-tax-configuration {
		.ant-modal-body {
			height: 80vh;
			overflow: auto;
		}
		.right {
			// height: 100%;

			.r-cont-box {
				// margin-left: 40px;
				// padding: 20px;
				// height: 90%;
				// overflow-y: auto;
			}

			.r-cont-block {
				overflow: hidden;
				border-bottom: 1px solid #e2e2e2;
				padding-bottom: 16px;
				margin-bottom: 32px;
			}

			.r-cont-block:last-child {
				border: none;
			}

			.r-cont-top {
				margin-left: 6px;
				display: flex;
				height: 16px;
				line-height: 16px;
				font-weight: bold;
				margin-bottom: 16px;
				align-items: center;

				.r-cont-top-checkbox {
					margin-right: 10px;
				}

				.r-cont-top-name {
					border-left: 2px solid #1990ff;
					padding-left: 4px;
					margin-right: 10px;
				}

				.r-cont-top-add {
					color: #0266ff;
					cursor: pointer;
				}
			}

			.checkbox {
				float: left;
				min-width: 150px;
				width: 20%;
				margin-bottom: 16px;
				margin-left: 32px !important;
				display: flex;
				align-items: center;

				> span {
					display: none;
					margin-left: 10px;
					cursor: pointer;
				}
			}

			.checkbox:hover {
				label + span {
					display: flex;
				}
				label + span + span {
					display: flex;
				}
			}
		}

		.pop-title {
			border-left: 2px solid #1990ff;
			font-weight: bold;
			padding-left: 4px;
			margin-bottom: 22px;
			line-height: 1;
		}
	}
</style>
